<template>
  <div class="kk-center" style="position:relative;box-sizing:border-box;overflow:hidden;">
    <div style="position:absolute;box-sizing:border-box;" :style="sty">
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  name: "kk-center",

  // 接收参数
  props: {
    w: null, // 水平模式
    h: null, // 垂直模式
    ins: null // 内部宽度
  },

  // 页面对象
  data: () => ({
    sty: null
  }),

  // 生命周期函数：挂载前调用
  created() {
    if (this.w != undefined) {
      this.sty = "height:100%;left:50%;transform:translateX(-50%);";
      if (this.ins) this.sty += `width:${this.ins}%;`;
    } else if (this.h != undefined) {
      this.sty = "width:100%;top:50%;transform:translateY(-50%);";
      if (this.ins) this.sty += `height:${this.ins}%;`;
    } else {
      this.sty = "top:50%;left:50%;transform:translate(-50%,-50%);";
      if (this.ins) this.sty += `height:${this.ins}%;width:${this.ins}%;`;
    }
  }
};
</script>

<style scoped>
.kk-center {
  display: inline-block;
}
</style>